<template>
  <div class="app-container">
    <div class="postion">
      <el-form
        class="formClass"
        label-width="120px"
      >
        <el-form-item label="信息描述:">
          <el-tag type="info">excel模版说明</el-tag>
          <el-tag>
            <i class="el-icon-download" />
            <a :href="defaultExcelTemplate">点击下载模版</a>
          </el-tag>
        </el-form-item>

        <el-form-item label="选择Excel:">
          <el-upload
            ref="upload"
            :auto-upload="false"
            :on-exceed="fileUploadExceed"
            :on-success="fileUploadSuccess"
            :on-error="fileUploadError"
            :limit="1"
            action="http://localhost:8110/admin/edu/subject/import"
            name="file"
            accept="application/vnd.ms-excel"
          >
            <el-button
              slot="trigger"
              size="small"
              type="primary"
            >选取文件</el-button>
            <el-button
              :disabled="importBtnDisabled"
              style="margin-left: 10px;"
              size="small"
              type="success"
              @click="submitUpload()"
            >导入</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      defaultExcelTemplate: process.env.OSS_PATH + '/excel/课程分类列表模板.xls',
      importBtnDisabled: false //导入按钮是否禁用
    }
  },
  methods: {
    // 上传多于一个文件时
    fileUploadExceed() {
      this.$message.warning('只能选取1个文件')
    },
    // 上传
    submitUpload() {
      this.importBtnDisabled = true
      this.$refs.upload.submit() // 提交上传请求
    },
    // 上传成功的回调
    fileUploadSuccess(response) {
      // 启用按钮
      this.importBtnDisabled = false
      if (response.code == 21006) {
        this.$message.error("有错误数据，请仔细检查")
      } else {
        this.$message.success(response.message)
      }
      // 清空文件列表
      this.$refs.upload.clearFiles()
    },
    // 上传失败的回调
    fileUploadError(response) {
      // 启用按钮
      this.importBtnDisabled = false
      this.$message.error(response.message)
      // 清空文件列表
      this.$refs.upload.clearFiles()
    }
  }
}
</script>
<style scoped>
.postion {
  width: 50%;
  height: 100%;
  background-color: antiquewhite;
  border-radius: 20px;
  margin: auto;
}
.formClass {
  padding: 2% 20% 0 28%;
  font-size: 44px;
}
</style>